<template>
  <div>
    <div>
      <van-nav-bar title="优惠券" left-arrow @click-left="$router.back()" />
    </div>

    <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
    <!-- 优惠券列表 -->
    <van-popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
      <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
        @change="onChange" @exchange="onExchange" />
    </van-popup>
  </div>
</template>

<script>

export default {
  data() {
    return {
      showList: true,
      chosenCoupon: -1,
      coupons: [{
        available: 1,
        condition: '无使用门槛\n最多优惠12元',
        reason: '',
        value: 150,
        name: '秋日优惠券',
        startAt: 1694275200,
        endAt: 1699545600,
        valueDesc: '12',
        unitDesc: '元',
      }],
      disabledCoupons: [{
        available: 1,
        condition: '无使用门槛\n最多优惠12元',
        reason: '已过期',
        value: 150,
        name: '夏日优惠活动',
        startAt: 1599104000,
        endAt: 1594592000,
        valueDesc: '1.5',
        unitDesc: '元',
      }],
    }
  },
  methods: {
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push({
        available: 1,
        condition: '无使用门槛\n优惠100元',
        reason: '',
        value: 1500,
        name: '秋日优惠券',
        startAt: 1704275200,
        endAt: 1719545600,
        valueDesc: '100',
        unitDesc: '元',
      });
    },
  }
}
</script>

<style scoped></style>